<template>
  <div class="my-vip">
    <div class="header">
      <div class="order">
        <my-list :defaultActive="'all'">
          <!-- <my-list-item index="1">最新发布</my-list-item>
          <my-list-item index="2">最多播放</my-list-item>
          <my-list-item index="3">最多收藏</my-list-item>-->
          <my-list-item index="all" @click.native="type1Id=''">全部</my-list-item>
          <my-list-item
            :index="item.id"
            v-for="(item,index) in type1List"
            :key="index"
            @click.native="typeClick(item.id)"
          >{{item.typeName}}</my-list-item>

        </my-list>
      </div>
      <div class="time">
        <my-list :defaultActive="'all'">
          <!-- <my-list-item index="1">10分钟以下</my-list-item>
          <my-list-item index="2">10-30分钟</my-list-item>
          <my-list-item index="3">30-60分钟</my-list-item> -->
         <my-list-item v-if="type2List.length>0" index="all" @click.native="type2Id=''">全部</my-list-item>
          <my-list-item
            :index="item.id"
            v-for="(item,index) in type2List"
            :key="index"
            @click.native="type2Id=item.id"
          >{{item.typeName}}</my-list-item>
        </my-list>
      </div>
    </div>
    <div class="main">
      <div class="vip-video-list" v-for="(item,index) in list" :key="index">
        <video-card
          :id="item.id"
          :src="item.coverPhoto"
          :title="item.title"
          :up="item.userName"
          :play="item.playNum"
          :time="item.uploadTime"
          :isVip="item.isVip"
          :video="item"
        ></video-card>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalRow"
        prev-text="上一页"
        next-text="下一页"
        :current-page.sync="pageNumber"
        :page-size="pageSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-vip",
  data: function() {
    return {
      activeIndex: "1",
      list: [],
      type1List: [],
      type2List: [],
      totalRow: 0,
      pageNumber: 1,
      pageSize: 24,
      type1Id: "",
      type2Id: ""
    };
  },
  methods: {
    getList() {
      this.axios
        .post("video/getVideoList", {
          isVip: 1,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          type1Id: this.type1Id,
          type2Id: this.type2Id
        })
        .then(res => {
          this.list = res.data.page.list;
          this.totalRow = res.data.page.totalRow;
        });
    },
    getType1List() {
      this.axios.post("videoType/type1List").then(res => {
        this.type1List = res.data.page.list;
      });
    },
    getType2List(id) {
      this.axios
        .post("videoType/getType2List", {
          id: this.type1Id
        })
        .then(res => {
          this.type2List = res.data.page.list;
        });
    },
    //点击分类1重新获取分类2
    typeClick(id) {
      this.type1Id=id
    }
  },
  mounted: function() {
    this.getList();
    this.getType1List();
  },
  watch: {
    pageNumber: function() {
      this.getList();
    },
    type1Id:function(){
        this.type2Id=''
        this.type2List=[]
        if (this.type1Id) this.getType2List();
        this.getList()
    },
    type2Id:function(){
        this.getList()
    }
  }
};
</script>

<style lang="scss" scoped>
.my-vip {
  .header {
    border-bottom: 1px solid #e5e9ef;
  }
  .main {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    .video-card {
      margin: 0 29px 25px 0px;
      &:nth-child(6n) {
        margin-right: 0;
      }
    }
  }
  .pagination {
    text-align: center;
    margin: 30px auto;
  }
}
</style>